<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../plugins/datatables/css/jquery.dataTables.css">
    <link rel="stylesheet" href="../css/rmp.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <blockquote class="layui-elem-quote layui-quote-nm rmp-monitoring-btn-tools">
        <button class="layui-btn layui-btn-sm layui-btn-danger">列显示</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger">视图显示</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm">保存数据</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm">批量操作</button>
        <button class="layui-btn layui-btn-sm layui-btn-default" style="float: right;">切换到精简模式</button>
    </blockquote>
    <div class="rmp-monitoring-content">
        <div class="layui-collapse">

        </div>
    </div>
</div>
<!--表格显示区域模板 start-->
<script type="text/html" id="monitoring-content-table-tpl">
{{# $.each(serverInfos.viewTypes, function(type, name){ }}
<!-- {{name}}视图面板 start-->
<div class="layui-colla-item" id="{{type}}">
    <h2 class="layui-colla-title"><strong>{{name}}</strong>&nbsp;&nbsp;&nbsp;
        <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-colla-icon-refresh ">&#x1002;</i>
    </h2>
    <div class="layui-colla-content layui-show">
        <div style="margin-bottom: 10px;">
            <div class="layui-inline">
                {{# $.each(serverInfos[type]['btnTool'], function(i, btn){ }}
                <button class="layui-btn layui-btn-{{ btn.type }} layui-btn-{{ btn.size }}" id="{{ btn.id }}">{{ btn.text }}</button>
                {{# }); }}
            </div>
        </div>
        <hr>
        <table class="layui-table" lay-skin="line row" >
            <thead>
            <tr>
                <th><input type="checkbox"></th>
                {{# $.each(serverInfos[type]['tableColumn'], function(i, n) { }}
                <th>{{ n }}</th>
                {{# }); }}
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>
<!-- {{name}}视图面板 end-->
{{# }); }}
</script>
<!--表格显示区域模板 end-->
<!--列显示设置页面模板 start-->
<script type="text/html" id="monitoring-column-view-tpl">
<div class="layer-show-view">
    <div id="rmp-monitoring-column-view-btns">
        {{# $.each(serverInfos.viewTypes, function(type, name){ }}
            <button class="layui-btn layui-btn-sm" server-type="{{ type }}">{{ name }}</button>
        {{# }); }}
    </div>
    <hr>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left:0px;">
                {{# $.each(serverInfos.viewTypes, function(type, name){ }}
                    <span server-type="{{ type }}" style="display: none;">
                    {{# $.each(serverInfos[type]['tableColumn'], function(index, columnName){ }}
                        <input type="checkbox" data-column="{{ index }}" title="{{ columnName.replace(/<br>/, '_') }}" server-type="{{ type }}" lay-filter="rmp-column-view"/>
                    {{# }); }}
                    </span>
                {{# }); }}
            </div>
        </div>
    </div>
</div>
</script>
<!--列显示设置页面模板 end-->

<!--视图显示设置页面模板 start-->
<script type="text/html" id="monitoring-type-view-tpl">
<div class="layer-show-view">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left:0px;">
                {{# $.each(d, function(type, visible){ }}
                    <input type="checkbox" title="{{ type }}" server-type="{{ type }}" lay-filter="rmp-type-view" {{ visible ? 'checked' : '' }}/>
                {{# }); }}
            </div>
        </div>
    </div>
</div>
</script>
<!--视图显示设置页面模板 end-->
<script src="../plugins/jquery.js"></script>
<script src="../plugins/layui/layui.js"></script>
<script src="../plugins/datatables/js/jquery.dataTables.js"></script>
<script src="../js/global.js"></script>
<script>
    //加载loading  index
    var globalLoadIndex;
    //不同类型的DT实例和相关运行参数存放
    var viewInstances = {};
    //视图显示设置
    var viewVisibleSetting = {};


    layui.use(['table', 'laytpl', 'layer', 'rmputils', 'element', 'form', 'util'], function(){
        var table = layui.table,
                laytpl = layui.laytpl,
                layer = layui.layer,
                rmputils = layui.rmputils,
                element = layui.element,
                form = layui.form,
                util = layui.util;

        /*************************************初始化****************************************************************/
        //初始化视图面板区域
        $(".rmp-monitoring-content > .layui-collapse").append(laytpl($("#monitoring-content-table-tpl").html()).render({}));
        element.render('collapse');

        //初始化工具条插件
        util.fixbar();

        //初始化本地设置
        initLocalSetting();

        //初始化相关模板/页面
        var columnViewHtml = laytpl($("#monitoring-column-view-tpl").html()).render({});
        var typeViewTpl = laytpl($("#monitoring-type-view-tpl").html());


        //初始化所有Datatables
        initDatatables();

        /********************************************jquery代理事件监听******************************************************************************/
        $(document).delegates({
            //列显示设置
            'blockquote > button:eq(0)':function(){
                layer_show('列显示设置', columnViewHtml, 800, 400, 1, function(layero, index){
                    layero.find('input').each(function(i, n){
                        viewInstances[$(n).attr('server-type')]['columnVisible'][$(n).attr('data-column')] && $(n).attr("checked",true);
                    });
                    form.render('checkbox');
                    $('#rmp-monitoring-column-view-btns > button:eq(0)').click();
                })
            },
            //视图显示设置
            'blockquote > button:eq(1)':function(){
                layer_show('视图显示设置', typeViewTpl.render(viewVisibleSetting), 600, 200, 1, function(layero, index){
                    form.render('checkbox');
                })
            },
            //保存数据
            'blockquote > button:eq(2)':function(){

            },
            //打开批量操作面板
            'blockquote > button:eq(3)':function(){

            },
            //切换简洁模式或者表格模式
            'blockquote > button:eq(4)':function(){

            },
            //列显示checkbox控制开关
            '#rmp-monitoring-column-view-btns > button':function(){
                var serverType = $(this).attr('server-type');
                var $views = $(this).parents('.layer-show-view').find('span[server-type="' + serverType + '"]');
                $views.siblings('span').hide();
                $views.show();
                $(this).removeClass('layui-btn-primary').siblings('button').addClass('layui-btn-primary');
            }
        });
        /********************************************layui form 事件监听******************************************************************************/
        //列显示控制
        form.on('checkbox(rmp-column-view)', function(data){
            var $obj = $(data.elem);
            viewInstances[$obj.attr('server-type')]['columnVisible'][$obj.attr('data-column')] = data.elem.checked;
            (viewInstances[$obj.attr('server-type')]['table']).column($obj.attr('data-column')).visible(data.elem.checked);
        });

        //视图显示控制
        form.on('checkbox(rmp-type-view)', function(data){
            var $obj = $(data.elem);
            var serverType = $obj.attr('server-type');
            viewVisibleSetting[serverType] = data.elem.checked;
            data.elem.checked ? $("#" + serverType).show() : $("#" + serverType).hide();
        });


        /********************************************公用方法**************************************************************************************/
        //datable初始化公共方法
        function initDatatables () {
            $.each(serverInfos.viewTypes, function(type, name){
                viewInstances[type] = {};
                var table = $('#' + type + ' .layui-table').on('xhr.dt', function(e, settings, json, xhr) {
                    //在ajax失败或者请求不成功时的处理
                    if (xhr.status != 200) {
                        $.each($("#" + type + " ." + SERVER_CONNECT_STATUS_CLASS), function (i, n) {
                            $(n).hasClass("layui-bg-green") && $(n).removeClass("layui-bg-green");
                            $(n).text("网络中断");
                        });
                    }
                }).DataTable($.extend(true, {}, DT_CONSTANT.DATA_TABLES.DEFAULT_OPTION,{

                    initComplete:function(settings, json){
                        //全选按钮
                        $(table.table().container()).find("th > input[type='checkbox']:eq(0)").click(function() {
                            if ($(this).is(":checked")) {
                                $(table.table().container()).find("td > input[type='checkbox']").prop("checked", true);
                            } else {
                                $(table.table().container()).find("td > input[type='checkbox']").prop("checked", false);
                            }
                        });
                        //列显示
                        viewInstances[type]['columnVisible'] = {};
                        $.each(serverInfos[type]['tableColumn'], function(index, name){
                            viewInstances[type]['columnVisible'][index + ''] =
                                    table.column(index).visible() ? true : false;

                        });

                    }
                }, serverInfos[type]['dtInitParameter']));
                viewInstances[type]['table'] = table;
            });
        }

        /**
         * 获取一些本地缓存的一些数据并设置到当前空间中
         */
        function initLocalSetting () {
            //获取视图显示设置
            var viewVisible = getLocalData('viewVisible', true);
            viewVisible == null && (viewVisible = {});
            $.each(serverInfos.viewTypes, function(type, name) {
                viewVisibleSetting[type] = typeof viewVisible[type] == 'boolean' ? viewVisible[type] : false;
                console.log(viewVisibleSetting[type]);
                if (viewVisibleSetting[type]) {
                    $("#" + type).show();
                } else {
                    $("#" + type).hide();
                }
            });
        }

        /**
         * 在关闭或者刷新页面保存数据到本地存储中
         */
        function saveLocalSetting() {

        }

    });


</script>
</body>

</html>

